<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header" :style="{backgroundColor:`rgba(250, 250, 250,${data.transparency})`}">
      <view class="" :style="{height: data.statusbarHeight+'px'}">
      </view>
      <view class="flex">
        <view class="round" @click="getback"
              >
          <uni-icons size="20" type="arrowleft"/>
        </view>
        <view class="nav">
          <template  v-for="(item,index) in data.nav_list">
          <view v-if="item.id==3" class="navitem" @click="changNavId(item)" :key="index"
                :style="{color:data.nav_id!=item.id ? `rgba(25, 25, 25,${data.transparency})`
					: `rgba(241, 0, 0,${data.transparency})`  }">
            {{ item.text }}
          </view>
          </template>
        </view>
        <view class="round" @click="share"
              >
          <image class="img" src="/static/img_/fx.png"></image>
<!--          <uni-icons size="26" type="redo"/>-->
        </view>
      </view>

    </view>

    <scroll-view scroll-y=true style="height: 100vh;" @scroll="scroll" :scroll-top="data.scrollTop"
                 :scroll-into-view="data.scrollId" scroll-with-animation="true" v-show="data.goodsdetali.name">
      <!-- 商品 -->
      <view class="commodity" ref="commodity">
        <swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#FF4A01" circular
                indicator-dots="true">
          <swiper-item v-if="data.goodsdetali.video">
            <video style="width: 100%;height: 100%;" :src="data.goodsdetali.video" controls></video>
          </swiper-item>
          <swiper-item v-for="(item,index) in data.list" :key="index">
            <image :src="item" mode="aspectFit"></image>
          </swiper-item>
        </swiper>
        <view class="commoditybox">
          <view class="price l_f_r_sb_c">
            <view class="left l_f_r l_al_e text_c_r">
              <text class="text_4_26 text_c_r">￥</text>
              <text>{{ $toFiexd(data.goodsdetali.price, 2) }}</text>

            </view>

            <view class="right l_f_r_c_c">
              已售：{{ data.goodsdetali.virtually_sales + data.goodsdetali.sales }}
              <text style="margin: 0 10rpx">|</text>
              库存：{{ data.goodsdetali.stock }}
            </view>
          </view>

          <view class="namebox">
            <view class="name">
              {{ data.goodsdetali.name }}
            </view>
            <view class="text_5_24 text_c_8f" style="margin-top: 10rpx">
              {{ data.goodsdetali.title }}
            </view>
            <view class="nbb">
              <view class="left"     v-if="data.goodsdetali.discount>0">

                <text> 送{{getDiscountJf(data.goodsdetali)}}资产积分</text>
                <!-- <text>月销:{{data.goodsdetali.sales+data.goodsdetali.virtually_sales}}</text> -->
              </view>

            </view>
          </view>
        </view>
      </view>
      <view class="evaluate box" v-if="Number(data.goodsdetali.integral_send)>0&&false">
        <text style="color: #666;">活动:</text>
        <text
            style="padding: 0 10px;border: 1px solid $color1;color: $color1;border-radius: 5px;margin-left: 10px;">送购物券
        </text>
        <text style="margin-left: 10px;">购买可获得{{ data.goodsdetali.integral_send }}购物券</text>
      </view>
      <!-- 店铺 -->
  	<view class="evaluate box" :id="'scrollView'+data.nav_list[0].id">
        <view class="title">
          {{ data.business.ID==0?'直营' :'店铺' }}
        </view>
        <view class="business"  v-if="data.business.ID!=0" 	@click="$goURl('/pages/business/businessdetail?id='+data.business.ID)">
          <view class="businessimage">
            <image :src="data.business.shop_head" mode="">
            </image>
          </view>
          <view class="right">
            <view class="rbox">
              <view class="text1 textsl1">
                {{data.business.name}}
              </view>
              <view class="text2">
                <uni-rate :disabled="true" disabledColor="#FFC41F" :value="data.business.star" />
              </view>
            </view>
          </view>
        </view>
      <view class="business"  v-else 	>
        <view class="businessimage">
          <image :src="data.business.shop_head||$defaultAvatar" mode="">
          </image>
        </view>
        <view class="right">
          <view class="rbox">
            <view class="text1 textsl1">
              {{store.state.name}}
            </view>
            <view class="text2">
              <uni-rate :disabled="true" disabledColor="#FFC41F" :value="5" />
            </view>
          </view>
        </view>
      </view>


      </view>

      <!-- 评价 -->
      <view v-if="false" class="recommend box" :id="'scrollView'+data.nav_list[1].id">
        <view class="title">
          评价
          <text
              @click="$goURl('/pages/commodity/evaluate?id='+data.goodsdetali.ID)">
            查看更多（{{ data.Comments.length }}条评价）
            >
          </text>
        </view>

        <scroll-view :scroll-x="true">
          <view class="evaluate">
            <view class="evaluateitem" v-for="(item,index) in data.Comments" :key="index">
              <view class="evaluatetop">
                <view class="imgs">
                  <image :src="item.user.head?item.user.head:$defaultAvatar" mode=""></image>
                </view>
                <view class="info">
                  <view class="infoname">
                    {{ item.user.nickname }}
                  </view>
                  <view class="xing">
                    <view class="xings" v-for="(items,indexs) in item.star" :key="indexs">
                      <image src="https://img.fubaozx.cn/static/oldImg/16995011701716.png"
                             mode="aspectFill"></image>
                    </view>
                    <view class="xings" v-for="(items,indexss) in (5-item.star)" :key="indexss">
                      <image src="https://img.fubaozx.cn/static/oldImg/16995011968377.png"
                             mode="aspectFill"></image>
                    </view>
                  </view>
                </view>
              </view>
              <view class="evaluatebottom textsl2">
                {{ item.content }}
              </view>
            </view>
          </view>
        </scroll-view>
        <view>还没有评价</view>
        <!-- <empty v-if="data.Comments.length==0"></empty> -->
      </view>
      <!-- 详情 -->
      <view class="details shopDetails box" :id="'scrollView'+data.nav_list[2].id">
        <view class=" l_f_r_c_c">
          <text class="text_5_28 title">
            商品详情

          </text>
        </view>
        <view class="details" v-html="data.goodsdetali.details">
        </view>
      </view>
      <!-- 别删 -->
      <view class="" style="height:50px;"></view>
    </scroll-view>
    <!-- 底部 -->
    <view class="goodsnav">
      <uni-goods-nav :fill="true" :options="data.options" :buttonGroup="data.buttonGroup" @click="onClick"
                     @buttonClick="buttonClick"/>
    </view>
    <!-- 规格 -->
    <uni-popup ref="popup" >
      <view class="popup-content">
        <view class="top">
          <uni-icons type="closeempty" size="22" @click="close"></uni-icons>
        </view>
        <view class="goodsdetail">
          <view class="goodsimg">
            <image :src="data.goods.img?data.goods.img:data.goodsdetali.img" mode="aspectFill"></image>
          </view>
          <view class="right">
            <view class="price">
              <text v-if="data.goods.price>0">
                <text style="font-size: 14px;"
                      v-if="!data.goodsdetali.is_single">
                </text>
                {{ $toFiexd(data.goods.price, 2) }}
              </text>
            </view>
            <view class="zcjf" v-if="data.goodsdetali.discount>0">
              <text> 送{{getDiscountJf({price:data.goods.price,discount:data.goodsdetali.discount})}}资产积分</text>

            </view>
            <view class="price">
              <text v-if="data.goods.coupon>0">积分{{ $toFiexd(data.goods.coupon, 2) }}</text>
            </view>
            <view class="stock">
              库存：{{ data.goods.stock }}
            </view>
            <view class="specifications">
              规格：
              <text v-for="(item,index) in data.listckecks" :key="index">{{ item + ' ' }}</text>
            </view>
          </view>
        </view>
        <view class="numbox">
          <view class="">
            数量
          </view>
          <uni-number-box v-model="data.number"/>
        </view>
        <view class="specsbox" v-for="(item,index) in data.lists" :key="index">
          <view class="title">
            {{ item.attr }}
          </view>
          <view class="specslist">
            <view class="specsitem" v-for="(items,indexs) in item.val" :key="indexs"
                  :class="{active:data.listckeck[index]==indexs}" @click="ckeck(index,indexs)">
              {{ items }}
            </view>
          </view>
        </view>
        <view class="buy" @click="create" :class="{'disabled':data.goods.stock==0}">
          {{ data.buttonGroup[data.isbutton].text }}
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script setup>
import {getCurrentInstance, nextTick, reactive, ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import store from "@/store";

const {
  proxy
} = getCurrentInstance();
const data = reactive({
  id: 0,
  listckecks: [],
  list: [],
  lists: [], //规格
  listckeck: [],
  statusbarHeight: uni.getSystemInfoSync().statusBarHeight, //刘海屏高度
  scrollTop: 0, //设置竖向滚动条位置
  goodsdetali: {},
  goods: {},
  business: {},//商家信息
  numberValue: 0,
  nav_list: [
      {
    id: 1,
    text: '',
    scrollId: "scrollView1"
  },
    {
      id: 2,
      text: '评价',
      scrollId: "scrollView2"
    },
    {
      id: 3,
      text: '详情',
      scrollId: "scrollView3"
    }
  ],
  options: [{
    icon: 'heart',
    text: '收藏',
    infoBackgroundColor: '#007aff',
    infoColor: "red",
    iconColor: ''
  },
    // 	{
    // 	icon: 'shop',
    // 	text: '店铺',
    // 	infoBackgroundColor: '#007aff',
    // 	infoColor: "red"
    // },
    {
      icon: 'cart',
      text: '购物车',
    }
  ],
  buttonGroup: [{
    text: '加入购物车',
    backgroundColor: '#FFFFFF',
    color: '#FF4A01',
    style: {
      width: '220rpx',
      height: '76rpx',
      background: '#FFFFFF',
      borderRadius: '16rpx 16rpx 16rpx 16rpx',
      border: '2rpx solid #FF4A01',
      boxSizing: 'border-box',
      color: '#F63B29',
    }
  },
    {
      text: '立即购买',
      backgroundColor: '#FF4A01',
      color: '#fff',
      style: {
        width: '220rpx',
        height: '76rpx',
        flex: 'none',
        marginLeft: '20rpx',
        background: '#FF4A01',
        borderRadius: '16rpx 16rpx 16rpx 16rpx',
        border: '2rpx solid #F63B29',
        boxSizing: 'border-box',
      }
    }
  ],
  isbutton: 0,
  nav_id: null, //导航选中id
  scrollId: "",
  number: 1,
  transparency: 0, //透明度
  isDropDown: false, //下拉到临界点
  //临界值(图片高度-头部高度-刘海屏高度 250-50-刘海屏高度)
  criticalValue: 200 - uni.getSystemInfoSync().statusBarHeight,
  selectlist: [],
  attribute: '',
  Comments: [], //商品评价
  Commentstotal: 0, //商品评价总数
})
function getDiscountJf(item) {
  if (item.discount > 0) {
    return ((Number(item.price)  * Number(item.discount/ 100) )).toFixed(4)
  } else {
    return 0
  }

}
const popup = ref()
onLoad((option) => {
  console.log('页面onLoad')
  data.id = Number(option.id)
  // addGoodsComments(Number(option.id)) //商品评价
  proxy.$request({
    url: `api/goods_list_all/0/`,
    method: 'post',
    data: {
      id: Number(option.id),
    },
    success: (res) => {
      try {
        data.list = evalPro(res.data.img_list) //eval('(' +  + ')')
      } catch (e) {
      }
      data.business=res.data.business
      data.goodsdetali = res.data
      // data.favorites
      console.log(data.goodsdetali)
      data.goodsdetali.details = res.data.details.replace(/\<img/gi,
          '<img style="max-width:100%;"');
      data.goodsdetali.details = data.goodsdetali.details.replace(/\<video/gi,
          '<video style="max-width:100%;"');
      data.lists = arr(res.data.attribute_list)


      data.listckecks = res.data.attribute_list[0].attr.map(item => {
        return item.val
      })
      data.goods = {
        img: res.data.attribute_list[0].img,
        price: res.data.attribute_list[0].price,
        stock: res.data.attribute_list[0].stock,
        coupon: res.data.attribute_list[0].coupon,
        ID: res.data.attribute_list[0].ID
      }
      data.listckeck = []
      data.lists.forEach(item => {
        data.listckeck.push(0)
      })

      if (res.data.favorites == 1) {
        data.options[0].iconColor = 'red'
        data.options[0].icon ='heart-filled'
      }
    }
  })
})
onShow(() => {
  console.log('页面onShow')
})

function evalPro(str) {
  var Fn = Function;
  return new Fn('return ' + str)();
}

function addGoodsComments(id) { //获取商品评价

  proxy.$request({
    url: `api/addGoodsComments/?id=${id}&page=1&size=10`,
    method: 'get',
    data: {
      id: id,
    },
    success: (res) => {
      data.Comments = res.data.data
      data.Commentstotal = res.data.total
    }
  })
}

function onClick(e) {
  console.log(e)
  if (e.content.text == '店铺') {
    proxy.$goURl('/pages/business/businessdetail?id=' + data.goodsdetali.business.ID)
  } else if (e.content.text == '收藏') {
    collect()
  } else {
    proxy.$goURl('/pages/cat/cat')
  }
}

const buttonClick = (e) => {
  data.isbutton = e.index
  popup.value.open('bottom')
}

// 点击收藏/取消收藏
function collect() {
  proxy.$request({
    url: `api/favorites/`,
    method: 'POST',
    data: {
      goods_id: data.goodsdetali.ID
    },
    success: (res) => {
      if (res.errno == 0) {
        if (res.errmsg == '取消收藏') {
          data.options[0].iconColor = 'red'
          data.options[0].icon = 'heart'
        } else {
          data.options[0].iconColor = 'red'
          data.options[0].icon = 'heart-filled'

        }
        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })
      }
    }
  })
}

const create = () => { //创建订单
  if (data.goods.ID != 0) {
    let attribute_list = [{
      'price_id': data.goods.ID,
      'number': data.number
    }]
    if(data.goods.stock==0){
      uni.showToast({
        icon: 'none',
        title: '请到线下店铺购买'
      })
      return;

    }
    if (data.isbutton) {
      const user=uni.getStorageSync("userInfo")
      if(!user.username){
        uni.showToast({
          icon: 'none',
          title: '请先实名认证'
        })
        uni.navigateTo({
          url:"/pages/personal/realName/realName"
        })
        return;
      }


      proxy.$request({
        url: `api/order/`,
        method: 'post',
        data: {
          'attribute_list': attribute_list
        },
        success: (res) => {
          if (res.errno == 0) {
            popup.value.close()
            proxy.$goURl('/pages/order/createorder?id=' + res.data)
          } else {
            uni.showToast({
              icon: 'none',
              title: res.errmsg
            })
          }
        }
      })
    } else {
      proxy.$request({
        url: `api/shoppingCart/`,
        method: 'post',
        data: {
          attribute_id: data.goods.ID,
          'number': data.number
        },
        success: (res) => {
          popup.value.close()
          data.isbutton = 0
          uni.showToast({
            icon: 'none',
            title: res.errmsg
          })
        }
      })
    }

  }
}
const ckeck = (a, b) => { //规格选择
                          // console.log("选择完成", data.listckeck)
  data.listckeck[a] = b
  console.log("选择完成", data.listckeck, data.lists)
  let num = data.listckeck.filter(item => {
    return item >= 0
  }).length

  if (num == data.lists.length) {
    let attribute = ''
    data.listckeck.forEach((item, index) => {
      console.log(data.lists[index].id[item])
      attribute = attribute + data.lists[index].id[item] + (index < data.lists.length - 1 ? '|' : '')
    })
    let listsss = []
    data.lists.forEach((item, index) => {
      listsss.push(item.val[data.listckeck[index]])
    })
    data.listckecks = listsss
    console.log("选择完成", data.listckecks)
    data.attribute = attribute
    data.goods = data.goodsdetali.attribute_list.filter(item => {
      console.log(item.attribute, attribute)
      return item.attribute == attribute
    }).map(item => {
      return {
        img: item.img,
        coupon: item.coupon,
        price: item.price,
        stock: item.stock,
        ID: item.ID
      }
    })[0]
  }
}
// 规格排列组合
const arr = (arr) => {
  var list = []
  arr[0]['attr'].forEach(f => {
    console.log()
    list.push({
      attr: f.attr,
      val: [],
      id: []
    })
    data.listckeck.push(-1)
  })
  arr.forEach(f => {
    f.attr.forEach(t => {
      for (var k = 0; k < list.length; k++) {
        if (list[k].attr == t.attr) {
          list[k].val.push(t.val)
          list[k].id.push(t.ID)
        }
      }
    })
  })
  for (var i = 0; i < list.length; i++) {
    list[i].val = [...new Set(list[i].val)]
    var s = []
    for (var k = 0; k < list[i].val.length; k++) {
      s.push(k == 0 ? 1 : 0)
    }
    data.selectlist.push(s)
  }
  list.forEach(item => {
    item.id = Array.from(new Set(item.id))
  })
  return list
}
const open = () => { //规格
  popup.value.open('bottom')
}
const close = () => {
  popup.value.close()
}
//scroll-view滚动触发
const scroll = (e) => {
  const scrollTop = e.detail.scrollTop
  calcSize()
  const tabs = data.nav_list.filter(item => item.top <= scrollTop).reverse();
  if (tabs.length > 0) {
    data.nav_id = tabs[0].id;
  }
  data.transparency = e.detail.scrollTop / data.criticalValue
  if (!data.isDropDown && e.detail.scrollTop >= data.criticalValue) {
    data.isDropDown = true
  } else if (data.isDropDown && e.detail.scrollTop < data.criticalValue) {
    data.isDropDown = false
    data.nav_id = null
  }
}
//计算高度
const calcSize = (event) => {
  let h = 0;
  let height = 0
  nextTick(function () {
    let infos = uni.createSelectorQuery().select(".commodity")
    infos.boundingClientRect((datas) => {
      height = datas.height
      data.nav_list.forEach(item => {
        let view = uni.createSelectorQuery().select(`#${item.scrollId}`);
        view.fields({
          size: true
        }, data => {
          if (data != null) {
            item.top = h + height - 50 - uni.getSystemInfoSync()
                .statusBarHeight + 10 * item.id;
            h += data.height
            item.bottom = h;
          }
        }).exec();
      })
    }).exec()
  })


}
//点击头部标题
const changNavId = (item) => {
  if (!data.isDropDown) return
  data.nav_id = item.id
  //scroll-into-view滚动到指定view会有头部高度的误差 用scroll-top来取代
  // data.scrollId = item.scrollId
  data.nav_list.forEach(n => {
    if (n.id == item.id) {
      data.scrollTop = String(item.top)
    }

  })
}
//返回
const getback = () => {
  if (getCurrentPages().length > 1) {
    uni.navigateBack()
  } else {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
}
//分享
const share = () => {
  uni.setClipboardData({
    data: proxy.$share + 'pages/commodity/details?id=' + data.id,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    }
  });

}
</script>

<style lang="scss" scoped>
.container {
  // padding-bottom: 60px;
}

.header {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;

  .flex {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    width: calc(100% - 40rpx);
    height: 100rpx;

  }

  .nav {
    display: flex;
    align-items: center;

    .navitem {
      margin-left: 30px;
      font-size: 30rpx;
    }

    .navitem:first-child {
      margin-left: 0;
    }
  }

  .round {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;

    width: 70rpx;
    height: 70rpx;
    .img{
      width: 36rpx;
      height: 36rpx;
    }
  }
}

.commodity {
  width: 100%;
  // height: 700rpx;

  .swiper {
    width: 100%;
    height: 750rpx;
  }

  image {
    width: 100%;
    height: 750rpx;

  }

  .commoditybox {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 0 0 30rpx 30rpx;

    .price {
      color: $color1;
      display: flex;
      font-size: 36rpx;
      font-weight: bold;

      .left {
        display: flex;

        .prices {
          text-decoration: line-through;
          color: #999;
          font-size: 24rpx;
          font-weight: 400;
          margin-left: 20rpx;
          display: flex;
          align-items: flex-end;
        }
      }

      .right {
        font-size: 24rpx;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        color: #999999;
        font-weight: 400;
      }

    }

    //text {
    //	font-size: 24rpx;
    //	margin-left: 20rpx;
    //	color: $color1;
    //}

    .namebox {
      //padding: 30rpx 0;
      //border-radius: 20rpx;
      //border: 1rpx solid #F5F5F5;
      margin-top: 30rpx;

      .name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .nbb {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;

        .left {

          text:nth-child(1) {
            background-color: #FFF5F5;
            color: $color1;
            font-size: 20rpx;
            padding: 5rpx 20rpx;
            border-radius: 5rpx;
          }

          text:nth-child(2) {
            color: #666;
            font-size: 24rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

  }
}

.box {
  margin-top: 20rpx;
  width: calc(100% - 40rpx);
  // margin-left: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  // height: 600px;

  .title {
    // text-align: center;
    font-weight: bold;
    font-size: 32rpx;
    color: #333;
    display: flex;
    justify-content: space-between;

    text {
      font-size: 24rpx;
      color: #999;
      font-weight: 500;
    }
  }

  .evaluate {
    display: flex;
    margin-top: 30rpx;

    .evaluateitem {
      background-color: #F5F5F5;
      padding: 20rpx;
      margin-right: 20rpx;
      border-radius: 20rpx;

      .evaluatetop {
        display: flex;

        .imgs {
          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
          }
        }

        .info {
          margin-left: 20rpx;

          .infoname {
            font-size: 28rpx;
            font-weight: bold;
          }

          .xing {
            display: flex;

            .xings {
              margin-right: 10rpx;

              image {
                width: 30rpx;
                height: 30rpx;
              }
            }
          }
        }

      }

      .evaluatebottom {
        width: 360rpx;
        font-size: 24rpx;
        height: 60rpx;
      }
    }
  }

  .details {
    margin-top: 20rpx;

    ::v-deep img {
      max-width: 100% !important;
    }

    ::v-deep image {
      max-width: 100% !important;
    }

    ::v-deep video {
      max-width: 100% !important;
    }
  }

  .business {
    margin: 30rpx 0;
    display: flex;

    .businessimage {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;

      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
      }
    }

    .right {
      width: calc(100% - 120rpx);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .rbox {
        width: calc(100% - 180rpx);

        .text1 {
          font-size: 32rpx;
          font-weight: bold;
        }

        .text2 {
          font-size: 28rpx;
          margin-top: 20rpx;
        }
      }

      .btns {
        background-color: $color1;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        color: #fff;
        font-size: 24rpx;
      }
    }
  }
}

.goodsnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.popup-content {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 30rpx 30rpx 0 0;

  .top {
    display: flex;
    justify-content: flex-end;
  }

  .goodsdetail {
    display: flex;

    .goodsimg {
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        // background-color: aqua;
        border-radius: 20rpx;
      }
    }

    .right {
      .price {
        color: red;
        font-size: 36rpx;
      }

      .stock {
        color: #999;
        font-size: 26rpx;
        margin: 20rpx 0;
      }

      .specifications {
        font-size: 28rpx;
      }
    }
  }

  .numbox {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
  }

  .specsbox {
    margin-top: 40rpx;

    .title {
    }

    .specslist {
      display: flex;
      flex-wrap: wrap;

      .specsitem {
        font-size: 28rpx;
        padding: 5rpx 20rpx;
        border-radius: 10rpx;
        border: 1rpx solid #555;
        color: #555;
        margin-right: 20rpx;
        margin-top: 20rpx;
      }

      .active {
        background-color:#fff0e9;
        border: 1rpx solid #F63B29;
        color: #F63B29;
      }
    }
  }

  .buy {
    background: linear-gradient(to right, #07be7e, #06b68f);
    background: #F63B29;
    color: #fff;
    padding: 20rpx;
    text-align: center;
    border-radius: 40rpx;
    margin-top: 40rpx;

  }
}

.m-l-14 {
  margin-left: 14rpx;
}

.shopDetails {
  margin-top: 0;
  border-top: 1rpx solid #F5F5F5;

  .title {

  }
}
.zcjf{
  background-color: #FFF5F5;
  color: $color1;
  font-size: 20rpx;
  padding: 5rpx 20rpx;
  border-radius: 5rpx;
}
// #ifdef MP-WEIXIN
::v-deep .uni-popup__wrapper {
  position: relative;
  bottom: -33px;
}

// #endif
.buy.disabled{
  background-color: #c6b8b8;
}
</style>
